<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">
    <ui:define name="content">

        <div class="Container100 ui-fluid">
            <div class="ContainerIndent"><div id="j_idt14" class="ui-panel ui-widget ui-widget-content ui-corner-all" data-widget="widget_j_idt14"><div id="j_idt14_content" class="ui-panel-content ui-widget-content">
                    <div class="FontBold Fs18 hardblue" style="margin: 15px 10px">Form Elements</div>
                    <div class="Separator"></div><div id="j_idt16" class="ui-panelgrid ui-widget ui-panelgrid-blank" style="border:0px none; background-color:transparent;"><div id="j_idt16_content" class="ui-panelgrid-content ui-widget-content ui-grid ui-grid-responsive"><div class="ui-grid-row"><div class="ui-panelgrid-cell ui-grid-col-2"><label id="j_idt17" class="ui-outputlabel ui-widget" for="input">Input</label></div><div class="ui-panelgrid-cell ui-grid-col-4"><input id="input" name="input" type="text" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all" /><script id="input_s" type="text/javascript">PrimeFaces.cw("InputText","widget_input",{id:"input"});</script></div><div class="ui-panelgrid-cell ui-grid-col-2"><label id="j_idt18" class="ui-outputlabel ui-widget" for="area">Textarea</label></div><div class="ui-panelgrid-cell ui-grid-col-4"><textarea id="area" name="area" cols="20" rows="3" maxlength="2147483647" class="ui-inputfield ui-inputtextarea ui-widget ui-state-default ui-corner-all ui-inputtextarea-resizable"></textarea><script id="area_s" type="text/javascript">$(function(){PrimeFaces.cw("InputTextarea","widget_area",{id:"area",autoResize:true});});</script></div></div><div class="ui-grid-row"><div class="ui-panelgrid-cell ui-grid-col-2"><label id="j_idt19" class="ui-outputlabel ui-widget" for="calendar_input">Calendar</label></div><div class="ui-panelgrid-cell ui-grid-col-4"><span id="calendar" class="ui-calendar"><input id="calendar_input" name="calendar_input" type="text" class="ui-inputfield ui-widget ui-state-default ui-corner-all" aria-labelledby="j_idt19" /></span><script id="calendar_s" type="text/javascript">$(function(){PrimeFaces.cw("Calendar","widget_calendar",{id:"calendar",popup:true,locale:"en_US",dateFormat:"m/d/y"});});</script></div><div class="ui-panelgrid-cell ui-grid-col-2"><label id="j_idt20" class="ui-outputlabel ui-widget" for="ac_input">Auto Complete</label></div><div class="ui-panelgrid-cell ui-grid-col-4"><span id="ac" class="ui-autocomplete"><input id="ac_input" name="ac_input" type="text" class="ui-autocomplete-input ui-inputfield ui-widget ui-state-default ui-corner-all" autocomplete="off" aria-labelledby="j_idt20" /><div id="ac_panel" class="ui-autocomplete-panel ui-widget-content ui-corner-all ui-helper-hidden ui-shadow"></div></span><script id="ac_s" type="text/javascript">$(function(){PrimeFaces.cw("AutoComplete","widget_ac",{id:"ac",delay:300});});</script></div></div><div class="ui-grid-row"><div class="ui-panelgrid-cell ui-grid-col-2"><label id="j_idt21" class="ui-outputlabel ui-widget" for="mask">Mask</label></div><div class="ui-panelgrid-cell ui-grid-col-4"><input id="mask" name="mask" type="text" class="ui-inputfield ui-inputmask ui-widget ui-state-default ui-corner-all" /><script id="mask_s" type="text/javascript">PrimeFaces.cw("InputMask","widget_mask",{id:"mask",mask:"99/99/9999"});</script></div><div class="ui-panelgrid-cell ui-grid-col-2"><label id="j_idt22" class="ui-outputlabel ui-widget" for="pwd">Password</label></div><div class="ui-panelgrid-cell ui-grid-col-4"><input id="pwd" name="pwd" type="password" class="ui-inputfield ui-password ui-widget ui-state-default ui-corner-all" /><script id="pwd_s" type="text/javascript">$(function(){PrimeFaces.cw("Password","widget_pwd",{id:"pwd"});});</script></div></div><div class="ui-grid-row"><div class="ui-panelgrid-cell ui-grid-col-2"><label id="j_idt23" class="ui-outputlabel ui-widget" for="keyboard">Keyboard</label></div><div class="ui-panelgrid-cell ui-grid-col-4"><input id="keyboard" name="keyboard" type="text" class="ui-inputfield ui-keyboard-input ui-widget ui-state-default ui-corner-all" /><script id="keyboard_s" type="text/javascript">PrimeFaces.cw("Keyboard","widget_keyboard",{id:"keyboard",showOn:"focus",showAnim:"fadeIn",keypadOnly:false,layoutName:"qwerty"});</script></div><div class="ui-panelgrid-cell ui-grid-col-2"><label id="j_idt24" class="ui-outputlabel ui-widget" for="onemenu_focus">OneMenu</label></div><div class="ui-panelgrid-cell ui-grid-col-4"><div id="onemenu" class="ui-selectonemenu ui-widget ui-state-default ui-corner-all"><div class="ui-helper-hidden-accessible"><input id="onemenu_focus" name="onemenu_focus" type="text" autocomplete="off" role="combobox" aria-haspopup="true" aria-expanded="false" aria-labelledby="j_idt24" /></div><div class="ui-helper-hidden-accessible"><select id="onemenu_input" name="onemenu_input" tabindex="-1"><option value="">Select One</option><option value="Xbox One">Xbox One</option><option value="PS4">PS4</option><option value="Wii U">Wii U</option></select></div><label id="onemenu_label" class="ui-selectonemenu-label ui-inputfield ui-corner-all">&amp;nbsp;</label><div class="ui-selectonemenu-trigger ui-state-default ui-corner-right"><span class="ui-icon ui-icon-triangle-1-s ui-c"></span></div><div id="onemenu_panel" class="ui-selectonemenu-panel ui-widget ui-widget-content ui-corner-all ui-helper-hidden ui-shadow"><div class="ui-selectonemenu-items-wrapper" style="height:auto"><ul id="onemenu_items" class="ui-selectonemenu-items ui-selectonemenu-list ui-widget-content ui-widget ui-corner-all ui-helper-reset" role="listbox"><li class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all" data-label="Select One" tabindex="-1" role="option">Select One</li><li class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all" data-label="Xbox One" tabindex="-1" role="option">Xbox One</li><li class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all" data-label="PS4" tabindex="-1" role="option">PS4</li><li class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all" data-label="Wii U" tabindex="-1" role="option">Wii U</li></ul></div></div></div><script id="onemenu_s" type="text/javascript">$(function(){PrimeFaces.cw("SelectOneMenu","widget_onemenu",{id:"onemenu"});});</script></div></div><div class="ui-grid-row"><div class="ui-panelgrid-cell ui-grid-col-2"><label id="j_idt29" class="ui-outputlabel ui-widget" for="spinner_input">Spinner</label></div><div class="ui-panelgrid-cell ui-grid-col-4"><span id="spinner" class="ui-spinner ui-widget ui-corner-all"><input id="spinner_input" name="spinner_input" type="text" class="ui-spinner-input ui-inputfield ui-state-default ui-corner-all" autocomplete="off" aria-labelledby="j_idt29" /><a class="ui-spinner-button ui-spinner-up ui-corner-tr ui-button ui-widget ui-state-default ui-button-text-only"><span class="ui-button-text"><span class="ui-icon ui-icon-triangle-1-n ui-c"></span></span></a><a class="ui-spinner-button ui-spinner-down ui-corner-br ui-button ui-widget ui-state-default ui-button-text-only"><span class="ui-button-text"><span class="ui-icon ui-icon-triangle-1-s ui-c"></span></span></a></span><script id="spinner_s" type="text/javascript">PrimeFaces.cw("Spinner","widget_spinner",{id:"spinner"});</script></div><div class="ui-panelgrid-cell ui-grid-col-2"><label id="j_idt30" class="ui-outputlabel ui-widget" for="slider">Slider</label></div><div class="ui-panelgrid-cell ui-grid-col-4"><div id="j_idt31" class="ui-outputpanel ui-widget"><input id="slider" name="slider" type="text" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all" /><script id="slider_s" type="text/javascript">PrimeFaces.cw("InputText","widget_slider",{id:"slider"});</script><div id="j_idt32"></div><script id="j_idt32_s" type="text/javascript">$(function(){PrimeFaces.cw("Slider","widget_j_idt32",{id:"j_idt32",input:"slider",min:0,max:100,animate:true,step:1,orientation:"horizontal",range:false});});</script></div></div></div><div class="ui-grid-row"><div class="ui-panelgrid-cell ui-grid-col-2"><label id="j_idt33" class="ui-outputlabel ui-widget" for="radio">Radio</label></div><div class="ui-panelgrid-cell ui-grid-col-4"><div id="radio" class="ui-selectoneradio ui-widget ui-grid ui-grid-responsive" style="margin:20px 0px;"><div class="ui-grid-row"><div class="ui-grid-col-4"><td><div class="ui-radiobutton ui-widget"><div class="ui-helper-hidden-accessible"><input id="radio:0" name="radio" type="radio" value="San Francisco" /></div><div class="ui-radiobutton-box ui-widget ui-corner-all ui-state-default"><span class="ui-radiobutton-icon ui-icon ui-icon-blank ui-c"></span></div></div></td><td><label for="radio:0">San Francisco</label></td></div><div class="ui-grid-col-4"><td><div class="ui-radiobutton ui-widget"><div class="ui-helper-hidden-accessible"><input id="radio:1" name="radio" type="radio" value="London" /></div><div class="ui-radiobutton-box ui-widget ui-corner-all ui-state-default"><span class="ui-radiobutton-icon ui-icon ui-icon-blank ui-c"></span></div></div></td><td><label for="radio:1">London</label></td></div><div class="ui-grid-col-4"><td><div class="ui-radiobutton ui-widget"><div class="ui-helper-hidden-accessible"><input id="radio:2" name="radio" type="radio" value="Paris" /></div><div class="ui-radiobutton-box ui-widget ui-corner-all ui-state-default"><span class="ui-radiobutton-icon ui-icon ui-icon-blank ui-c"></span></div></div></td><td><label for="radio:2">Paris</label></td></div></div><div class="ui-grid-row"><div class="ui-grid-col-4"><td><div class="ui-radiobutton ui-widget"><div class="ui-helper-hidden-accessible"><input id="radio:3" name="radio" type="radio" value="Istanbul" /></div><div class="ui-radiobutton-box ui-widget ui-corner-all ui-state-default"><span class="ui-radiobutton-icon ui-icon ui-icon-blank ui-c"></span></div></div></td><td><label for="radio:3">Istanbul</label></td></div><div class="ui-grid-col-4"><td><div class="ui-radiobutton ui-widget"><div class="ui-helper-hidden-accessible"><input id="radio:4" name="radio" type="radio" value="Berlin" /></div><div class="ui-radiobutton-box ui-widget ui-corner-all ui-state-default"><span class="ui-radiobutton-icon ui-icon ui-icon-blank ui-c"></span></div></div></td><td><label for="radio:4">Berlin</label></td></div><div class="ui-grid-col-4"><td><div class="ui-radiobutton ui-widget"><div class="ui-helper-hidden-accessible"><input id="radio:5" name="radio" type="radio" value="Barcelona" /></div><div class="ui-radiobutton-box ui-widget ui-corner-all ui-state-default"><span class="ui-radiobutton-icon ui-icon ui-icon-blank ui-c"></span></div></div></td><td><label for="radio:5">Barcelona</label></td></div></div><div class="ui-grid-row"><div class="ui-grid-col-4"><td><div class="ui-radiobutton ui-widget"><div class="ui-helper-hidden-accessible"><input id="radio:6" name="radio" type="radio" value="Rome" /></div><div class="ui-radiobutton-box ui-widget ui-corner-all ui-state-default"><span class="ui-radiobutton-icon ui-icon ui-icon-blank ui-c"></span></div></div></td><td><label for="radio:6">Rome</label></td></div><div class="ui-grid-col-4"><td><div class="ui-radiobutton ui-widget"><div class="ui-helper-hidden-accessible"><input id="radio:7" name="radio" type="radio" value="Sao Paulo" /></div><div class="ui-radiobutton-box ui-widget ui-corner-all ui-state-default"><span class="ui-radiobutton-icon ui-icon ui-icon-blank ui-c"></span></div></div></td><td><label for="radio:7">Sao Paulo</label></td></div><div class="ui-grid-col-4"><td><div class="ui-radiobutton ui-widget"><div class="ui-helper-hidden-accessible"><input id="radio:8" name="radio" type="radio" value="Amsterdam" /></div><div class="ui-radiobutton-box ui-widget ui-corner-all ui-state-default"><span class="ui-radiobutton-icon ui-icon ui-icon-blank ui-c"></span></div></div></td><td><label for="radio:8">Amsterdam</label></td></div></div></div><script id="radio_s" type="text/javascript">$(function(){PrimeFaces.cw("SelectOneRadio","widget_radio",{id:"radio"});});</script></div><div class="ui-panelgrid-cell ui-grid-col-2"><label id="j_idt43" class="ui-outputlabel ui-widget" for="chkbox">Checkbox</label></div><div class="ui-panelgrid-cell ui-grid-col-4"><div id="chkbox" class="ui-selectmanycheckbox ui-widget ui-grid ui-grid-responsive" style="margin:20px 0px;"><div class="ui-grid-row"><div class="ui-grid-col-4"><td><div class="ui-chkbox ui-widget"><div class="ui-helper-hidden-accessible"><input id="chkbox:0" name="chkbox" type="checkbox" value="San Francisco" /></div><div class="ui-chkbox-box ui-widget ui-corner-all ui-state-default"><span class="ui-chkbox-icon ui-icon ui-icon-blank ui-c"></span></div></div></td><td><label for="chkbox:0">San Francisco</label></td></div><div class="ui-grid-col-4"><td><div class="ui-chkbox ui-widget"><div class="ui-helper-hidden-accessible"><input id="chkbox:1" name="chkbox" type="checkbox" value="London" /></div><div class="ui-chkbox-box ui-widget ui-corner-all ui-state-default"><span class="ui-chkbox-icon ui-icon ui-icon-blank ui-c"></span></div></div></td><td><label for="chkbox:1">London</label></td></div><div class="ui-grid-col-4"><td><div class="ui-chkbox ui-widget"><div class="ui-helper-hidden-accessible"><input id="chkbox:2" name="chkbox" type="checkbox" value="Paris" /></div><div class="ui-chkbox-box ui-widget ui-corner-all ui-state-default"><span class="ui-chkbox-icon ui-icon ui-icon-blank ui-c"></span></div></div></td><td><label for="chkbox:2">Paris</label></td></div></div><div class="ui-grid-row"><div class="ui-grid-col-4"><td><div class="ui-chkbox ui-widget"><div class="ui-helper-hidden-accessible"><input id="chkbox:3" name="chkbox" type="checkbox" value="Istanbul" /></div><div class="ui-chkbox-box ui-widget ui-corner-all ui-state-default"><span class="ui-chkbox-icon ui-icon ui-icon-blank ui-c"></span></div></div></td><td><label for="chkbox:3">Istanbul</label></td></div><div class="ui-grid-col-4"><td><div class="ui-chkbox ui-widget"><div class="ui-helper-hidden-accessible"><input id="chkbox:4" name="chkbox" type="checkbox" value="Berlin" /></div><div class="ui-chkbox-box ui-widget ui-corner-all ui-state-default"><span class="ui-chkbox-icon ui-icon ui-icon-blank ui-c"></span></div></div></td><td><label for="chkbox:4">Berlin</label></td></div><div class="ui-grid-col-4"><td><div class="ui-chkbox ui-widget"><div class="ui-helper-hidden-accessible"><input id="chkbox:5" name="chkbox" type="checkbox" value="Barcelona" /></div><div class="ui-chkbox-box ui-widget ui-corner-all ui-state-default"><span class="ui-chkbox-icon ui-icon ui-icon-blank ui-c"></span></div></div></td><td><label for="chkbox:5">Barcelona</label></td></div></div><div class="ui-grid-row"><div class="ui-grid-col-4"><td><div class="ui-chkbox ui-widget"><div class="ui-helper-hidden-accessible"><input id="chkbox:6" name="chkbox" type="checkbox" value="Rome" /></div><div class="ui-chkbox-box ui-widget ui-corner-all ui-state-default"><span class="ui-chkbox-icon ui-icon ui-icon-blank ui-c"></span></div></div></td><td><label for="chkbox:6">Rome</label></td></div><div class="ui-grid-col-4"><td><div class="ui-chkbox ui-widget"><div class="ui-helper-hidden-accessible"><input id="chkbox:7" name="chkbox" type="checkbox" value="Sao Paulo" /></div><div class="ui-chkbox-box ui-widget ui-corner-all ui-state-default"><span class="ui-chkbox-icon ui-icon ui-icon-blank ui-c"></span></div></div></td><td><label for="chkbox:7">Sao Paulo</label></td></div><div class="ui-grid-col-4"><td><div class="ui-chkbox ui-widget"><div class="ui-helper-hidden-accessible"><input id="chkbox:8" name="chkbox" type="checkbox" value="Amsterdam" /></div><div class="ui-chkbox-box ui-widget ui-corner-all ui-state-default"><span class="ui-chkbox-icon ui-icon ui-icon-blank ui-c"></span></div></div></td><td><label for="chkbox:8">Amsterdam</label></td></div></div></div><script id="chkbox_s" type="text/javascript">$(function(){PrimeFaces.cw("SelectManyCheckbox","widget_chkbox",{id:"chkbox"});});</script></div></div><div class="ui-grid-row"><div class="ui-panelgrid-cell ui-grid-col-2"><label id="j_idt53" class="ui-outputlabel ui-widget" for="btn">Button</label></div><div class="ui-panelgrid-cell ui-grid-col-4"><button id="btn" name="btn" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left" style="max-width:150px;" type="button"><span class="ui-button-icon-left ui-icon ui-c fa fa-edit white Fs16"></span><span class="ui-button-text ui-c">Edit</span></button><script id="btn_s" type="text/javascript">PrimeFaces.cw("CommandButton","widget_btn",{id:"btn"});</script></div><div class="ui-panelgrid-cell ui-grid-col-2"><label id="j_idt54" class="ui-outputlabel ui-widget" for="spbtn">SplitButton</label></div><div class="ui-panelgrid-cell ui-grid-col-4"><div id="spbtn" class="ui-splitbutton ui-buttonset ui-widget" style="max-width:150px;"><button id="spbtn_button" name="spbtn_button" class="ui-button ui-widget ui-state-default ui-corner-left ui-button-text-icon-left" onclick="PrimeFaces.ab({s:&quot;spbtn&quot;});return false;" style="max-width:150px;" type="button"><span class="ui-button-icon-left ui-icon ui-c ui-icon-check fa fa-check white Fs14"></span><span class="ui-button-text ui-c">Save</span></button><button id="spbtn_menuButton" name="spbtn_menuButton" type="button" class="ui-splitbutton-menubutton  ui-button ui-widget ui-state-default ui-corner-right ui-button-icon-only"><span class="ui-button-icon-left ui-icon ui-icon-triangle-1-s"></span><span class="ui-button-text ui-c">ui-button</span></button><div id="spbtn_menu" class="ui-menu ui-menu-dynamic ui-widget ui-widget-content ui-corner-all ui-helper-clearfix ui-shadow" role="menu"><ul class="ui-menu-list ui-helper-reset"><li class="ui-menuitem ui-widget ui-corner-all" role="menuitem"><a id="j_idt55" class="ui-menuitem-link ui-corner-all" href="#"><span class="ui-menuitem-icon ui-icon ui-icon-arrowrefresh-1-w fa fa-arrow-circle-up"></span><span class="ui-menuitem-text">Update</span></a></li><li class="ui-menuitem ui-widget ui-corner-all" role="menuitem"><a id="j_idt56" class="ui-menuitem-link ui-corner-all" href="#"><span class="ui-menuitem-icon ui-icon ui-icon-close fa fa-close"></span><span class="ui-menuitem-text">Delete</span></a></li><li class="ui-separator ui-state-default"></li><li class="ui-menuitem ui-widget ui-corner-all" role="menuitem"><a id="j_idt58" class="ui-menuitem-link ui-corner-all" href="http://www.primefaces.org/"><span class="ui-menuitem-icon ui-icon ui-icon-extlink fa fa-bank"></span><span class="ui-menuitem-text">Homepage</span></a></li></ul></div></div><script id="spbtn_s" type="text/javascript">$(function(){PrimeFaces.cw("SplitButton","widget_spbtn",{id:"spbtn"});});</script></div></div><div class="ui-grid-row"><div class="ui-panelgrid-cell ui-grid-col-2"><label id="j_idt59" class="ui-outputlabel ui-widget" for="chkmenu">Checkbox Menu</label></div><div class="ui-panelgrid-cell ui-grid-col-4"><div id="chkmenu" class="ui-selectcheckboxmenu ui-widget ui-state-default ui-corner-all"><div class="ui-helper-hidden-accessible"><input id="chkmenu_focus" name="chkmenu_focus" type="text" readonly="readonly" /></div><div class="ui-helper-hidden"><input id="chkmenu:0" name="chkmenu" type="checkbox" value="1" data-escaped="true" /><label for="chkmenu:0">Option 1</label><input id="chkmenu:1" name="chkmenu" type="checkbox" value="2" data-escaped="true" /><label for="chkmenu:1">Option 2</label><input id="chkmenu:2" name="chkmenu" type="checkbox" value="3" data-escaped="true" /><label for="chkmenu:2">Option 3</label></div><span class="ui-selectcheckboxmenu-label-container"><label class="ui-selectcheckboxmenu-label ui-corner-all">Checkbox Menu</label></span><div class="ui-selectcheckboxmenu-trigger ui-state-default ui-corner-right"><span class="ui-icon ui-icon-triangle-1-s"></span></div></div><script id="chkmenu_s" type="text/javascript">$(function(){PrimeFaces.cw("SelectCheckboxMenu","widget_chkmenu",{id:"chkmenu"});});</script></div><div class="ui-panelgrid-cell ui-grid-col-2"><label id="j_idt63" class="ui-outputlabel ui-widget" for="booleanBtn">Boolean Button</label></div><div class="ui-panelgrid-cell ui-grid-col-4"><div id="booleanBtn" type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left white Fs16" style="max-width:150px;"><div class="ui-helper-hidden-accessible"><input id="booleanBtn_input" name="booleanBtn_input" type="checkbox" /></div><span class="ui-button-icon-left ui-icon ui-c fa fa-close"></span><span class="ui-button-text ui-c">No</span></div><script id="booleanBtn_s" type="text/javascript">PrimeFaces.cw("SelectBooleanButton","widget_booleanBtn",{id:"booleanBtn",onLabel:"Yes",offLabel:"No",onIcon:"fa fa-check",offIcon:"fa fa-close"});</script></div></div><div class="ui-grid-row"><div class="ui-panelgrid-cell ui-grid-col-2"><label id="j_idt64" class="ui-outputlabel ui-widget" for="oneBtn">OneButton</label></div><div class="ui-panelgrid-cell ui-grid-col-4"><div id="oneBtn" class="ui-selectonebutton ui-buttonset ui-widget ui-corner-all ui-buttonset-2"><div class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left" tabindex="0"><input id="oneBtn:0" name="oneBtn" type="radio" value="Spark" class="ui-helper-hidden" /><span class="ui-button-text ui-c">Spark</span></div><div class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-right" tabindex="0"><input id="oneBtn:1" name="oneBtn" type="radio" value="Ronin" class="ui-helper-hidden" /><span class="ui-button-text ui-c">Ronin</span></div></div><script id="oneBtn_s" type="text/javascript">PrimeFaces.cw("SelectOneButton","widget_oneBtn",{id:"oneBtn"});</script></div><div class="ui-panelgrid-cell ui-grid-col-2"><label id="j_idt67" class="ui-outputlabel ui-widget" for="manyBtn">Many Button</label></div><div class="ui-panelgrid-cell ui-grid-col-4"><div id="manyBtn" class="ui-selectonebutton ui-buttonset ui-widget ui-corner-all ui-buttonset-3"><div class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left" tabindex="0"><input id="manyBtn:0" name="manyBtn" type="radio" value="Spark" class="ui-helper-hidden" /><span class="ui-button-text ui-c">Spark</span></div><div class="ui-button ui-widget ui-state-default ui-button-text-only" tabindex="0"><input id="manyBtn:1" name="manyBtn" type="radio" value="Ronin" class="ui-helper-hidden" /><span class="ui-button-text ui-c">Ronin</span></div><div class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-right" tabindex="0"><input id="manyBtn:2" name="manyBtn" type="radio" value="Rio" class="ui-helper-hidden" /><span class="ui-button-text ui-c">Rio</span></div></div><script id="manyBtn_s" type="text/javascript">PrimeFaces.cw("SelectOneButton","widget_manyBtn",{id:"manyBtn"});</script></div></div><div class="ui-grid-row"><div class="ui-panelgrid-cell ui-grid-col-2"><label id="j_idt71" class="ui-outputlabel ui-widget" for="listbox_input">Listbox</label></div><div class="ui-panelgrid-cell ui-grid-col-4"><div id="listbox" class="ui-selectonelistbox ui-inputfield ui-widget ui-widget-content ui-corner-all"><div class="ui-helper-hidden-accessible"><select id="listbox_input" name="listbox_input" size="2" aria-labelledby="j_idt71"><option value="Sentinel">Sentinel</option><option value="Spark">Spark</option><option value="Ronin">Ronin</option><option value="Rio">Rio</option><option value="Primus">Primus</option></select></div><div class="ui-selectlistbox-listcontainer" style="height:auto"><ul class="ui-selectlistbox-list"><li class="ui-selectlistbox-item ui-corner-all">Sentinel</li><li class="ui-selectlistbox-item ui-corner-all">Spark</li><li class="ui-selectlistbox-item ui-corner-all">Ronin</li><li class="ui-selectlistbox-item ui-corner-all">Rio</li><li class="ui-selectlistbox-item ui-corner-all">Primus</li></ul></div></div><script id="listbox_s" type="text/javascript">PrimeFaces.cw("SelectOneListbox","widget_listbox",{id:"listbox"});</script></div><div class="ui-panelgrid-cell ui-grid-col-2"><label id="j_idt77" class="ui-outputlabel ui-widget" for="listbox_input">Dialog</label></div><div class="ui-panelgrid-cell ui-grid-col-4"><button id="dialog2" name="dialog2" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left" onclick="PF('dlg').show();" style="max-width:150px;" type="button"><span class="ui-button-icon-left ui-icon ui-c fa fa-home white Fs16"></span><span class="ui-button-text ui-c">Dialog</span></button><script id="dialog2_s" type="text/javascript">PrimeFaces.cw("CommandButton","widget_dialog2",{id:"dialog2"});</script></div></div></div></div></div></div><script id="j_idt14_s" type="text/javascript">PrimeFaces.cw("Panel","widget_j_idt14",{id:"j_idt14"});</script><div id="j_idt78" class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-shadow ui-hidden-container"><div class="ui-dialog-titlebar ui-widget-header ui-helper-clearfix ui-corner-top"><span id="j_idt78_title" class="ui-dialog-title">Login</span><a href="#" class="ui-dialog-titlebar-icon ui-dialog-titlebar-close ui-corner-all"><span class="ui-icon ui-icon-closethick"></span></a></div><div class="ui-dialog-content ui-widget-content"><div id="j_idt79" class="ui-panelgrid ui-widget ui-panelgrid-blank"><div id="j_idt79_content" class="ui-panelgrid-content ui-widget-content ui-grid ui-grid-responsive"><div class="ui-grid-row"><div class="ui-panelgrid-cell ui-grid-col-4"><label for="username">Username:</label></div><div class="ui-panelgrid-cell ui-grid-col-8"><input id="username" name="username" type="text" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all" /><script id="username_s" type="text/javascript">PrimeFaces.cw("InputText","widget_username",{id:"username"});</script></div></div><div class="ui-grid-row"><div class="ui-panelgrid-cell ui-grid-col-4"><label for="password">Password:</label></div><div class="ui-panelgrid-cell ui-grid-col-8"><input id="password" name="password" type="password" class="ui-inputfield ui-password ui-widget ui-state-default ui-corner-all" /><script id="password_s" type="text/javascript">$(function(){PrimeFaces.cw("Password","widget_password",{id:"password"});});</script></div></div></div><div class="ui-panelgrid-footer ui-widget-header"><button id="j_idt82" name="j_idt82" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" onclick="PF('dlg').hide();" type="button"><span class="ui-button-text ui-c">Login</span></button><script id="j_idt82_s" type="text/javascript">PrimeFaces.cw("CommandButton","widget_j_idt82",{id:"j_idt82"});</script></div></div></div></div><script id="j_idt78_s" type="text/javascript">$(function(){PrimeFaces.cw("Dialog","dlg",{id:"j_idt78",draggable:false,resizable:false,responsive:true});});</script>
            </div>
        </div>

        <div class="Container100 ui-fluid">
            <div class="ContainerIndent"><div id="j_idt84" class="ui-panel ui-widget ui-widget-content ui-corner-all" data-widget="widget_j_idt84"><div id="j_idt84_content" class="ui-panel-content ui-widget-content">
                    <div class="FontBold Fs18 hardblue" style="margin: 15px 10px">Responsive DataTable</div>
                    <div class="Separator"></div><div id="j_idt86" class="ui-datatable ui-widget ui-datatable-reflow" style=""><div class="ui-datatable-header ui-widget-header ui-corner-top">
                            DataTable
                        </div><div class="ui-datatable-tablewrapper"><table role="grid"><thead id="j_idt86_head"><tr role="row"><th id="j_idt86:j_idt88" class="ui-state-default" role="columnheader"><span class="ui-column-title">Id</span></th><th id="j_idt86:j_idt90" class="ui-state-default" role="columnheader"><span class="ui-column-title">Year</span></th><th id="j_idt86:j_idt92" class="ui-state-default" role="columnheader"><span class="ui-column-title">Brand</span></th><th id="j_idt86:j_idt94" class="ui-state-default" role="columnheader"><span class="ui-column-title">Color</span></th></tr></thead><tbody id="j_idt86_data" class="ui-datatable-data ui-widget-content"><tr data-ri="0" class="ui-widget-content ui-datatable-even" role="row"><td role="gridcell">f51c5849</td><td role="gridcell">1973</td><td role="gridcell">Volvo</td><td role="gridcell">Blue</td></tr><tr data-ri="1" class="ui-widget-content ui-datatable-odd" role="row"><td role="gridcell">292386ed</td><td role="gridcell">1969</td><td role="gridcell">Volkswagen</td><td role="gridcell">Orange</td></tr><tr data-ri="2" class="ui-widget-content ui-datatable-even" role="row"><td role="gridcell">e510e002</td><td role="gridcell">1966</td><td role="gridcell">Audi</td><td role="gridcell">Silver</td></tr><tr data-ri="3" class="ui-widget-content ui-datatable-odd" role="row"><td role="gridcell">d6d7927e</td><td role="gridcell">1979</td><td role="gridcell">Volkswagen</td><td role="gridcell">Maroon</td></tr><tr data-ri="4" class="ui-widget-content ui-datatable-even" role="row"><td role="gridcell">1b1273f3</td><td role="gridcell">1971</td><td role="gridcell">Ford</td><td role="gridcell">Red</td></tr><tr data-ri="5" class="ui-widget-content ui-datatable-odd" role="row"><td role="gridcell">74caa393</td><td role="gridcell">1983</td><td role="gridcell">Volvo</td><td role="gridcell">Blue</td></tr><tr data-ri="6" class="ui-widget-content ui-datatable-even" role="row"><td role="gridcell">492a1347</td><td role="gridcell">2002</td><td role="gridcell">Fiat</td><td role="gridcell">Orange</td></tr><tr data-ri="7" class="ui-widget-content ui-datatable-odd" role="row"><td role="gridcell">a18abe94</td><td role="gridcell">1977</td><td role="gridcell">Ford</td><td role="gridcell">Orange</td></tr><tr data-ri="8" class="ui-widget-content ui-datatable-even" role="row"><td role="gridcell">3937f884</td><td role="gridcell">1964</td><td role="gridcell">Volkswagen</td><td role="gridcell">Silver</td></tr><tr data-ri="9" class="ui-widget-content ui-datatable-odd" role="row"><td role="gridcell">854f9db1</td><td role="gridcell">1997</td><td role="gridcell">Audi</td><td role="gridcell">Yellow</td></tr></tbody></table></div></div><script id="j_idt86_s" type="text/javascript">$(function(){PrimeFaces.cw("DataTable","widget_j_idt86",{id:"j_idt86",reflow:true});});</script></div></div><script id="j_idt84_s" type="text/javascript">PrimeFaces.cw("Panel","widget_j_idt84",{id:"j_idt84"});</script>
            </div>
        </div>

        <div class="Container100 ui-fluid">
            <div class="ContainerIndent"><div id="j_idt97" class="ui-panel ui-widget ui-widget-content ui-corner-all" data-widget="widget_j_idt97"><div id="j_idt97_content" class="ui-panel-content ui-widget-content">
                    <div class="FontBold Fs18 hardblue" style="margin: 15px 10px">Responsive DataGrid</div>
                    <div class="Separator"></div><div id="j_idt99" class="ui-datagrid ui-widget" style=""><div class="ui-datagrid-header ui-widget-header ui-corner-top">
                            DataGrid
                        </div><div id="j_idt99_paginator_top" class="ui-paginator ui-paginator-top ui-widget-header" role="navigation"><span class="ui-paginator-first ui-state-default ui-corner-all ui-state-disabled"><span class="ui-icon ui-icon-seek-first">p</span></span><span class="ui-paginator-prev ui-state-default ui-corner-all ui-state-disabled"><span class="ui-icon ui-icon-seek-prev">p</span></span><span class="ui-paginator-pages"><span class="ui-paginator-page ui-state-default ui-state-active ui-corner-all" tabindex="0">1</span><span class="ui-paginator-page ui-state-default ui-corner-all" tabindex="0">2</span><span class="ui-paginator-page ui-state-default ui-corner-all" tabindex="0">3</span><span class="ui-paginator-page ui-state-default ui-corner-all" tabindex="0">4</span><span class="ui-paginator-page ui-state-default ui-corner-all" tabindex="0">5</span></span><span class="ui-paginator-next ui-state-default ui-corner-all" tabindex="0"><span class="ui-icon ui-icon-seek-next">p</span></span><span class="ui-paginator-last ui-state-default ui-corner-all" tabindex="0"><span class="ui-icon ui-icon-seek-end">p</span></span></div><div id="j_idt99_content" class="ui-datagrid-content ui-widget-content ui-grid ui-grid-responsive"><div class="ui-grid-row"><div class="ui-datagrid-column ui-grid-col-4"><div id="j_idt99:0:j_idt101" class="ui-panel ui-widget ui-widget-content ui-corner-all" style="text-align:center" data-widget="widget_j_idt99_0_j_idt101"><div id="j_idt99:0:j_idt101_header" class="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all"><span class="ui-panel-title">d697f2c4</span></div><div id="j_idt99:0:j_idt101_content" class="ui-panel-content ui-widget-content"><table style="width:100%">
<tbody>
<tr>
<td>Jaguar - 1986</td>
</tr>
</tbody>
</table>
</div></div><script id="j_idt99:0:j_idt101_s" type="text/javascript">PrimeFaces.cw("Panel","widget_j_idt99_0_j_idt101",{id:"j_idt99:0:j_idt101"});</script></div><div class="ui-datagrid-column ui-grid-col-4"><div id="j_idt99:1:j_idt101" class="ui-panel ui-widget ui-widget-content ui-corner-all" style="text-align:center" data-widget="widget_j_idt99_1_j_idt101"><div id="j_idt99:1:j_idt101_header" class="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all"><span class="ui-panel-title">7ddd7a39</span></div><div id="j_idt99:1:j_idt101_content" class="ui-panel-content ui-widget-content"><table style="width:100%">
<tbody>
<tr>
<td>Volkswagen - 1961</td>
</tr>
</tbody>
</table>
</div></div><script id="j_idt99:1:j_idt101_s" type="text/javascript">PrimeFaces.cw("Panel","widget_j_idt99_1_j_idt101",{id:"j_idt99:1:j_idt101"});</script></div><div class="ui-datagrid-column ui-grid-col-4"><div id="j_idt99:2:j_idt101" class="ui-panel ui-widget ui-widget-content ui-corner-all" style="text-align:center" data-widget="widget_j_idt99_2_j_idt101"><div id="j_idt99:2:j_idt101_header" class="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all"><span class="ui-panel-title">f34bfb4a</span></div><div id="j_idt99:2:j_idt101_content" class="ui-panel-content ui-widget-content"><table style="width:100%">
<tbody>
<tr>
<td>Ford - 1981</td>
</tr>
</tbody>
</table>
</div></div><script id="j_idt99:2:j_idt101_s" type="text/javascript">PrimeFaces.cw("Panel","widget_j_idt99_2_j_idt101",{id:"j_idt99:2:j_idt101"});</script></div></div><div class="ui-grid-row"><div class="ui-datagrid-column ui-grid-col-4"><div id="j_idt99:3:j_idt101" class="ui-panel ui-widget ui-widget-content ui-corner-all" style="text-align:center" data-widget="widget_j_idt99_3_j_idt101"><div id="j_idt99:3:j_idt101_header" class="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all"><span class="ui-panel-title">f43e7152</span></div><div id="j_idt99:3:j_idt101_content" class="ui-panel-content ui-widget-content"><table style="width:100%">
<tbody>
<tr>
<td>Jaguar - 1966</td>
</tr>
</tbody>
</table>
</div></div><script id="j_idt99:3:j_idt101_s" type="text/javascript">PrimeFaces.cw("Panel","widget_j_idt99_3_j_idt101",{id:"j_idt99:3:j_idt101"});</script></div><div class="ui-datagrid-column ui-grid-col-4"><div id="j_idt99:4:j_idt101" class="ui-panel ui-widget ui-widget-content ui-corner-all" style="text-align:center" data-widget="widget_j_idt99_4_j_idt101"><div id="j_idt99:4:j_idt101_header" class="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all"><span class="ui-panel-title">eb5ce662</span></div><div id="j_idt99:4:j_idt101_content" class="ui-panel-content ui-widget-content"><table style="width:100%">
<tbody>
<tr>
<td>Jaguar - 2002</td>
</tr>
</tbody>
</table>
</div></div><script id="j_idt99:4:j_idt101_s" type="text/javascript">PrimeFaces.cw("Panel","widget_j_idt99_4_j_idt101",{id:"j_idt99:4:j_idt101"});</script></div><div class="ui-datagrid-column ui-grid-col-4"><div id="j_idt99:5:j_idt101" class="ui-panel ui-widget ui-widget-content ui-corner-all" style="text-align:center" data-widget="widget_j_idt99_5_j_idt101"><div id="j_idt99:5:j_idt101_header" class="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all"><span class="ui-panel-title">ea29fcfd</span></div><div id="j_idt99:5:j_idt101_content" class="ui-panel-content ui-widget-content"><table style="width:100%">
<tbody>
<tr>
<td>Volkswagen - 1962</td>
</tr>
</tbody>
</table>
</div></div><script id="j_idt99:5:j_idt101_s" type="text/javascript">PrimeFaces.cw("Panel","widget_j_idt99_5_j_idt101",{id:"j_idt99:5:j_idt101"});</script></div></div><div class="ui-grid-row"><div class="ui-datagrid-column ui-grid-col-4"><div id="j_idt99:6:j_idt101" class="ui-panel ui-widget ui-widget-content ui-corner-all" style="text-align:center" data-widget="widget_j_idt99_6_j_idt101"><div id="j_idt99:6:j_idt101_header" class="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all"><span class="ui-panel-title">4a96c65b</span></div><div id="j_idt99:6:j_idt101_content" class="ui-panel-content ui-widget-content"><table style="width:100%">
<tbody>
<tr>
<td>Volkswagen - 1967</td>
</tr>
</tbody>
</table>
</div></div><script id="j_idt99:6:j_idt101_s" type="text/javascript">PrimeFaces.cw("Panel","widget_j_idt99_6_j_idt101",{id:"j_idt99:6:j_idt101"});</script></div><div class="ui-datagrid-column ui-grid-col-4"><div id="j_idt99:7:j_idt101" class="ui-panel ui-widget ui-widget-content ui-corner-all" style="text-align:center" data-widget="widget_j_idt99_7_j_idt101"><div id="j_idt99:7:j_idt101_header" class="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all"><span class="ui-panel-title">45f746e2</span></div><div id="j_idt99:7:j_idt101_content" class="ui-panel-content ui-widget-content"><table style="width:100%">
<tbody>
<tr>
<td>BMW - 1973</td>
</tr>
</tbody>
</table>
</div></div><script id="j_idt99:7:j_idt101_s" type="text/javascript">PrimeFaces.cw("Panel","widget_j_idt99_7_j_idt101",{id:"j_idt99:7:j_idt101"});</script></div><div class="ui-datagrid-column ui-grid-col-4"><div id="j_idt99:8:j_idt101" class="ui-panel ui-widget ui-widget-content ui-corner-all" style="text-align:center" data-widget="widget_j_idt99_8_j_idt101"><div id="j_idt99:8:j_idt101_header" class="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all"><span class="ui-panel-title">5ee27cbc</span></div><div id="j_idt99:8:j_idt101_content" class="ui-panel-content ui-widget-content"><table style="width:100%">
<tbody>
<tr>
<td>Volvo - 1986</td>
</tr>
</tbody>
</table>
</div></div><script id="j_idt99:8:j_idt101_s" type="text/javascript">PrimeFaces.cw("Panel","widget_j_idt99_8_j_idt101",{id:"j_idt99:8:j_idt101"});</script></div></div><div class="ui-grid-row"><div class="ui-datagrid-column ui-grid-col-4"><div id="j_idt99:9:j_idt101" class="ui-panel ui-widget ui-widget-content ui-corner-all" style="text-align:center" data-widget="widget_j_idt99_9_j_idt101"><div id="j_idt99:9:j_idt101_header" class="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all"><span class="ui-panel-title">0d66b90a</span></div><div id="j_idt99:9:j_idt101_content" class="ui-panel-content ui-widget-content"><table style="width:100%">
<tbody>
<tr>
<td>Audi - 1960</td>
</tr>
</tbody>
</table>
</div></div><script id="j_idt99:9:j_idt101_s" type="text/javascript">PrimeFaces.cw("Panel","widget_j_idt99_9_j_idt101",{id:"j_idt99:9:j_idt101"});</script></div><div class="ui-datagrid-column ui-grid-col-4"><div id="j_idt99:10:j_idt101" class="ui-panel ui-widget ui-widget-content ui-corner-all" style="text-align:center" data-widget="widget_j_idt99_10_j_idt101"><div id="j_idt99:10:j_idt101_header" class="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all"><span class="ui-panel-title">48ec027b</span></div><div id="j_idt99:10:j_idt101_content" class="ui-panel-content ui-widget-content"><table style="width:100%">
<tbody>
<tr>
<td>Audi - 1991</td>
</tr>
</tbody>
</table>
</div></div><script id="j_idt99:10:j_idt101_s" type="text/javascript">PrimeFaces.cw("Panel","widget_j_idt99_10_j_idt101",{id:"j_idt99:10:j_idt101"});</script></div><div class="ui-datagrid-column ui-grid-col-4"><div id="j_idt99:11:j_idt101" class="ui-panel ui-widget ui-widget-content ui-corner-all" style="text-align:center" data-widget="widget_j_idt99_11_j_idt101"><div id="j_idt99:11:j_idt101_header" class="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all"><span class="ui-panel-title">eb5953cd</span></div><div id="j_idt99:11:j_idt101_content" class="ui-panel-content ui-widget-content"><table style="width:100%">
<tbody>
<tr>
<td>Renault - 1961</td>
</tr>
</tbody>
</table>
</div></div><script id="j_idt99:11:j_idt101_s" type="text/javascript">PrimeFaces.cw("Panel","widget_j_idt99_11_j_idt101",{id:"j_idt99:11:j_idt101"});</script></div></div></div><div id="j_idt99_paginator_bottom" class="ui-paginator ui-paginator-bottom ui-widget-header ui-corner-bottom" role="navigation"><span class="ui-paginator-first ui-state-default ui-corner-all ui-state-disabled"><span class="ui-icon ui-icon-seek-first">p</span></span><span class="ui-paginator-prev ui-state-default ui-corner-all ui-state-disabled"><span class="ui-icon ui-icon-seek-prev">p</span></span><span class="ui-paginator-pages"><span class="ui-paginator-page ui-state-default ui-state-active ui-corner-all" tabindex="0">1</span><span class="ui-paginator-page ui-state-default ui-corner-all" tabindex="0">2</span><span class="ui-paginator-page ui-state-default ui-corner-all" tabindex="0">3</span><span class="ui-paginator-page ui-state-default ui-corner-all" tabindex="0">4</span><span class="ui-paginator-page ui-state-default ui-corner-all" tabindex="0">5</span></span><span class="ui-paginator-next ui-state-default ui-corner-all" tabindex="0"><span class="ui-icon ui-icon-seek-next">p</span></span><span class="ui-paginator-last ui-state-default ui-corner-all" tabindex="0"><span class="ui-icon ui-icon-seek-end">p</span></span></div></div><script id="j_idt99_s" type="text/javascript">PrimeFaces.cw("DataGrid","widget_j_idt99",{id:"j_idt99",paginator:{id:['j_idt99_paginator_top','j_idt99_paginator_bottom'],rows:12,rowCount:50,page:0,currentPageTemplate:'({currentPage} of {totalPages})'}});</script></div></div><script id="j_idt97_s" type="text/javascript">PrimeFaces.cw("Panel","widget_j_idt97",{id:"j_idt97"});</script>
            </div>
        </div>

        <div class="Container100 ui-fluid">
            <div class="ContainerIndent"><div id="j_idt105" class="ui-panel ui-widget ui-widget-content ui-corner-all" data-widget="widget_j_idt105"><div id="j_idt105_content" class="ui-panel-content ui-widget-content">
                    <div class="FontBold Fs18 hardblue" style="margin: 15px 10px">Responsive Tree</div>
                    <div class="Separator"></div><div id="j_idt107" class="ui-tree ui-widget ui-widget-content ui-corner-all" role="tree" tabindex="0" aria-multiselectable="false"><ul class="ui-tree-container"><li id="j_idt107:0" data-rowkey="0" data-nodetype="default" class="ui-treenode ui-treenode-parent ui-treenode-unselected"><span class="ui-treenode-content ui-tree-selectable" aria-expanded="false" aria-selected="false"><span class="ui-tree-toggler ui-icon ui-icon-triangle-1-e"></span><span class="ui-treenode-icon ui-icon ui-icon-folder-collapsed"></span><span class="ui-treenode-label ui-corner-all" tabindex="-1" role="treeitem">Documents</span></span><ul class="ui-treenode-children" role="group" style="display:none"><li id="j_idt107:0_0" data-rowkey="0_0" data-nodetype="default" class="ui-treenode ui-treenode-parent ui-treenode-unselected"><span class="ui-treenode-content ui-tree-selectable" aria-expanded="false" aria-selected="false"><span class="ui-tree-toggler ui-icon ui-icon-triangle-1-e"></span><span class="ui-treenode-icon ui-icon ui-icon-folder-collapsed"></span><span class="ui-treenode-label ui-corner-all" tabindex="-1" role="treeitem">Work</span></span><ul class="ui-treenode-children" role="group" style="display:none"><li id="j_idt107:0_0_0" data-rowkey="0_0_0" data-nodetype="document" class="ui-treenode ui-treenode-leaf ui-treenode-unselected"><span class="ui-treenode-content ui-tree-selectable" aria-expanded="false" aria-selected="false"><span class="ui-treenode-leaf-icon"></span><span class="ui-treenode-icon ui-icon ui-icon-document"></span><span class="ui-treenode-label ui-corner-all" tabindex="-1" role="treeitem">Expenses.doc</span></span><ul class="ui-treenode-children" role="group" style="display:none"></ul></li><li id="j_idt107:0_0_1" data-rowkey="0_0_1" data-nodetype="document" class="ui-treenode ui-treenode-leaf ui-treenode-unselected"><span class="ui-treenode-content ui-tree-selectable" aria-expanded="false" aria-selected="false"><span class="ui-treenode-leaf-icon"></span><span class="ui-treenode-icon ui-icon ui-icon-document"></span><span class="ui-treenode-label ui-corner-all" tabindex="-1" role="treeitem">Resume.doc</span></span><ul class="ui-treenode-children" role="group" style="display:none"></ul></li></ul></li><li id="j_idt107:0_1" data-rowkey="0_1" data-nodetype="default" class="ui-treenode ui-treenode-parent ui-treenode-unselected"><span class="ui-treenode-content ui-tree-selectable" aria-expanded="false" aria-selected="false"><span class="ui-tree-toggler ui-icon ui-icon-triangle-1-e"></span><span class="ui-treenode-icon ui-icon ui-icon-folder-collapsed"></span><span class="ui-treenode-label ui-corner-all" tabindex="-1" role="treeitem">PrimeFaces</span></span><ul class="ui-treenode-children" role="group" style="display:none"><li id="j_idt107:0_1_0" data-rowkey="0_1_0" data-nodetype="document" class="ui-treenode ui-treenode-leaf ui-treenode-unselected"><span class="ui-treenode-content ui-tree-selectable" aria-expanded="false" aria-selected="false"><span class="ui-treenode-leaf-icon"></span><span class="ui-treenode-icon ui-icon ui-icon-document"></span><span class="ui-treenode-label ui-corner-all" tabindex="-1" role="treeitem">RefDoc.pages</span></span><ul class="ui-treenode-children" role="group" style="display:none"></ul></li></ul></li></ul></li><li id="j_idt107:1" data-rowkey="1" data-nodetype="default" class="ui-treenode ui-treenode-parent ui-treenode-unselected"><span class="ui-treenode-content ui-tree-selectable" aria-expanded="false" aria-selected="false"><span class="ui-tree-toggler ui-icon ui-icon-triangle-1-e"></span><span class="ui-treenode-icon ui-icon ui-icon-folder-collapsed"></span><span class="ui-treenode-label ui-corner-all" tabindex="-1" role="treeitem">Pictures</span></span><ul class="ui-treenode-children" role="group" style="display:none"><li id="j_idt107:1_0" data-rowkey="1_0" data-nodetype="picture" class="ui-treenode ui-treenode-leaf ui-treenode-unselected"><span class="ui-treenode-content ui-tree-selectable" aria-expanded="false" aria-selected="false"><span class="ui-treenode-leaf-icon"></span><span class="ui-treenode-icon ui-icon ui-icon-image"></span><span class="ui-treenode-label ui-corner-all" tabindex="-1" role="treeitem">barcelona.jpg</span></span><ul class="ui-treenode-children" role="group" style="display:none"></ul></li><li id="j_idt107:1_1" data-rowkey="1_1" data-nodetype="picture" class="ui-treenode ui-treenode-leaf ui-treenode-unselected"><span class="ui-treenode-content ui-tree-selectable" aria-expanded="false" aria-selected="false"><span class="ui-treenode-leaf-icon"></span><span class="ui-treenode-icon ui-icon ui-icon-image"></span><span class="ui-treenode-label ui-corner-all" tabindex="-1" role="treeitem">logo.jpg</span></span><ul class="ui-treenode-children" role="group" style="display:none"></ul></li><li id="j_idt107:1_2" data-rowkey="1_2" data-nodetype="picture" class="ui-treenode ui-treenode-leaf ui-treenode-unselected"><span class="ui-treenode-content ui-tree-selectable" aria-expanded="false" aria-selected="false"><span class="ui-treenode-leaf-icon"></span><span class="ui-treenode-icon ui-icon ui-icon-image"></span><span class="ui-treenode-label ui-corner-all" tabindex="-1" role="treeitem">optimusprime.png</span></span><ul class="ui-treenode-children" role="group" style="display:none"></ul></li></ul></li><li id="j_idt107:2" data-rowkey="2" data-nodetype="default" class="ui-treenode ui-treenode-parent ui-treenode-unselected"><span class="ui-treenode-content ui-tree-selectable" aria-expanded="false" aria-selected="false"><span class="ui-tree-toggler ui-icon ui-icon-triangle-1-e"></span><span class="ui-treenode-icon ui-icon ui-icon-folder-collapsed"></span><span class="ui-treenode-label ui-corner-all" tabindex="-1" role="treeitem">Movies</span></span><ul class="ui-treenode-children" role="group" style="display:none"><li id="j_idt107:2_0" data-rowkey="2_0" data-nodetype="default" class="ui-treenode ui-treenode-parent ui-treenode-unselected"><span class="ui-treenode-content ui-tree-selectable" aria-expanded="false" aria-selected="false"><span class="ui-tree-toggler ui-icon ui-icon-triangle-1-e"></span><span class="ui-treenode-icon ui-icon ui-icon-folder-collapsed"></span><span class="ui-treenode-label ui-corner-all" tabindex="-1" role="treeitem">Al Pacino</span></span><ul class="ui-treenode-children" role="group" style="display:none"><li id="j_idt107:2_0_0" data-rowkey="2_0_0" data-nodetype="mp3" class="ui-treenode ui-treenode-leaf ui-treenode-unselected"><span class="ui-treenode-content ui-tree-selectable" aria-expanded="false" aria-selected="false"><span class="ui-treenode-leaf-icon"></span><span class="ui-treenode-icon ui-icon ui-icon-video"></span><span class="ui-treenode-label ui-corner-all" tabindex="-1" role="treeitem">Scarface</span></span><ul class="ui-treenode-children" role="group" style="display:none"></ul></li><li id="j_idt107:2_0_1" data-rowkey="2_0_1" data-nodetype="mp3" class="ui-treenode ui-treenode-leaf ui-treenode-unselected"><span class="ui-treenode-content ui-tree-selectable" aria-expanded="false" aria-selected="false"><span class="ui-treenode-leaf-icon"></span><span class="ui-treenode-icon ui-icon ui-icon-video"></span><span class="ui-treenode-label ui-corner-all" tabindex="-1" role="treeitem">Carlitos' Way</span></span><ul class="ui-treenode-children" role="group" style="display:none"></ul></li></ul></li><li id="j_idt107:2_1" data-rowkey="2_1" data-nodetype="default" class="ui-treenode ui-treenode-parent ui-treenode-unselected"><span class="ui-treenode-content ui-tree-selectable" aria-expanded="false" aria-selected="false"><span class="ui-tree-toggler ui-icon ui-icon-triangle-1-e"></span><span class="ui-treenode-icon ui-icon ui-icon-folder-collapsed"></span><span class="ui-treenode-label ui-corner-all" tabindex="-1" role="treeitem">Robert De Niro</span></span><ul class="ui-treenode-children" role="group" style="display:none"><li id="j_idt107:2_1_0" data-rowkey="2_1_0" data-nodetype="mp3" class="ui-treenode ui-treenode-leaf ui-treenode-unselected"><span class="ui-treenode-content ui-tree-selectable" aria-expanded="false" aria-selected="false"><span class="ui-treenode-leaf-icon"></span><span class="ui-treenode-icon ui-icon ui-icon-video"></span><span class="ui-treenode-label ui-corner-all" tabindex="-1" role="treeitem">Goodfellas</span></span><ul class="ui-treenode-children" role="group" style="display:none"></ul></li><li id="j_idt107:2_1_1" data-rowkey="2_1_1" data-nodetype="mp3" class="ui-treenode ui-treenode-leaf ui-treenode-unselected"><span class="ui-treenode-content ui-tree-selectable" aria-expanded="false" aria-selected="false"><span class="ui-treenode-leaf-icon"></span><span class="ui-treenode-icon ui-icon ui-icon-video"></span><span class="ui-treenode-label ui-corner-all" tabindex="-1" role="treeitem">Untouchables</span></span><ul class="ui-treenode-children" role="group" style="display:none"></ul></li></ul></li></ul></li></ul></div><script id="j_idt107_s" type="text/javascript">$(function(){PrimeFaces.cw("VerticalTree","widget_j_idt107",{id:"j_idt107",dynamic:false,cache:false,iconStates:{'default' : {expandedIcon:'ui-icon-folder-open',collapsedIcon:'ui-icon-folder-collapsed'}}});});</script></div></div><script id="j_idt105_s" type="text/javascript">PrimeFaces.cw("Panel","widget_j_idt105",{id:"j_idt105"});</script>
            </div>
        </div>

        <div class="Container100 ui-fluid">
            <div class="ContainerIndent"><div id="j_idt117" class="ui-panel ui-widget ui-widget-content ui-corner-all" data-widget="widget_j_idt117"><div id="j_idt117_content" class="ui-panel-content ui-widget-content">
                    <div class="FontBold Fs18 hardblue" style="margin: 15px 10px">Responsive PickList</div>
                    <div class="Separator"></div><div id="pickList" class="ui-picklist ui-widget ui-helper-clearfix ui-picklist-responsive" style="max-width:800px;"><div class="ui-picklist-source-controls ui-picklist-buttons"><div class="ui-picklist-buttons-cell"><button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-picklist-button-move-up" title="Move Up"><span class="ui-button-icon-left ui-icon ui-c ui-icon ui-icon-arrow-1-n"></span><span class="ui-button-text ui-c">ui-button</span></button><button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-picklist-button-move-top" title="Move Top"><span class="ui-button-icon-left ui-icon ui-c ui-icon ui-icon-arrowstop-1-n"></span><span class="ui-button-text ui-c">ui-button</span></button><button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-picklist-button-move-down" title="Move Down"><span class="ui-button-icon-left ui-icon ui-c ui-icon ui-icon-arrow-1-s"></span><span class="ui-button-text ui-c">ui-button</span></button><button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-picklist-button-move-bottom" title="Move Bottom"><span class="ui-button-icon-left ui-icon ui-c ui-icon ui-icon-arrowstop-1-s"></span><span class="ui-button-text ui-c">ui-button</span></button></div></div><div class="ui-picklist-list-wrapper"><div class="ui-picklist-filter-container"><input id="pickList_source_filter" name="pickList_source_filter" type="text" class="ui-picklist-filter ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all" /><span class="ui-icon ui-icon-search"></span></div><div class="ui-picklist-caption ui-widget-header ui-corner-tl ui-corner-tr">From</div><ul class="ui-widget-content ui-picklist-list ui-picklist-source ui-corner-bottom"><li class="ui-picklist-item ui-corner-all" data-item-value="San Francisco" data-item-label="San Francisco">San Francisco</li><li class="ui-picklist-item ui-corner-all" data-item-value="London" data-item-label="London">London</li><li class="ui-picklist-item ui-corner-all" data-item-value="Paris" data-item-label="Paris">Paris</li><li class="ui-picklist-item ui-corner-all" data-item-value="Istanbul" data-item-label="Istanbul">Istanbul</li><li class="ui-picklist-item ui-corner-all" data-item-value="Berlin" data-item-label="Berlin">Berlin</li><li class="ui-picklist-item ui-corner-all" data-item-value="Barcelona" data-item-label="Barcelona">Barcelona</li><li class="ui-picklist-item ui-corner-all" data-item-value="Rome" data-item-label="Rome">Rome</li></ul><select id="pickList_source" name="pickList_source" multiple="true" class="ui-helper-hidden"></select></div><div class="ui-picklist-buttons"><div class="ui-picklist-buttons-cell"><button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-picklist-button-add" title="Add"><span class="ui-button-icon-left ui-icon ui-c ui-icon ui-icon-arrow-1-e"></span><span class="ui-button-text ui-c">ui-button</span></button><button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-picklist-button-add-all" title="Add All"><span class="ui-button-icon-left ui-icon ui-c ui-icon ui-icon-arrowstop-1-e"></span><span class="ui-button-text ui-c">ui-button</span></button><button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-picklist-button-remove" title="Remove"><span class="ui-button-icon-left ui-icon ui-c ui-icon ui-icon-arrow-1-w"></span><span class="ui-button-text ui-c">ui-button</span></button><button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-picklist-button-remove-all" title="Remove All"><span class="ui-button-icon-left ui-icon ui-c ui-icon ui-icon-arrowstop-1-w"></span><span class="ui-button-text ui-c">ui-button</span></button></div></div><div class="ui-picklist-list-wrapper"><div class="ui-picklist-filter-container"><input id="pickList_target_filter" name="pickList_target_filter" type="text" class="ui-picklist-filter ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all" /><span class="ui-icon ui-icon-search"></span></div><div class="ui-picklist-caption ui-widget-header ui-corner-tl ui-corner-tr">To</div><ul class="ui-widget-content ui-picklist-list ui-picklist-target ui-corner-bottom"></ul><select id="pickList_target" name="pickList_target" multiple="true" class="ui-helper-hidden"></select></div><div class="ui-picklist-target-controls ui-picklist-buttons"><div class="ui-picklist-buttons-cell"><button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-picklist-button-move-up" title="Move Up"><span class="ui-button-icon-left ui-icon ui-c ui-icon ui-icon-arrow-1-n"></span><span class="ui-button-text ui-c">ui-button</span></button><button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-picklist-button-move-top" title="Move Top"><span class="ui-button-icon-left ui-icon ui-c ui-icon ui-icon-arrowstop-1-n"></span><span class="ui-button-text ui-c">ui-button</span></button><button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-picklist-button-move-down" title="Move Down"><span class="ui-button-icon-left ui-icon ui-c ui-icon ui-icon-arrow-1-s"></span><span class="ui-button-text ui-c">ui-button</span></button><button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-picklist-button-move-bottom" title="Move Bottom"><span class="ui-button-icon-left ui-icon ui-c ui-icon ui-icon-arrowstop-1-s"></span><span class="ui-button-text ui-c">ui-button</span></button></div></div></div><script id="pickList_s" type="text/javascript">$(function(){PrimeFaces.cw("PickList","widget_pickList",{id:"pickList",effect:"fade",effectSpeed:"fast",showSourceControls:true,showTargetControls:true});});</script></div></div><script id="j_idt117_s" type="text/javascript">PrimeFaces.cw("Panel","widget_j_idt117",{id:"j_idt117"});</script>
            </div>
        </div>

        <div class="Container100 ui-fluid">
            <div class="ContainerIndent"><div id="j_idt122" class="ui-panel ui-widget ui-widget-content ui-corner-all" data-widget="widget_j_idt122"><div id="j_idt122_content" class="ui-panel-content ui-widget-content">
                    <div class="FontBold Fs18 hardblue" style="margin: 15px 10px">Responsive Carousel</div>
                    <div class="Separator"></div><div id="j_idt124" class="ui-carousel ui-widget ui-widget-content ui-corner-all" style="margin-top:20px"><div class="ui-carousel-header ui-widget-header ui-corner-all"><div class="ui-carousel-header-title">Carousel</div><span class="ui-carousel-button ui-carousel-next-button ui-icon ui-icon-circle-triangle-e"></span><span class="ui-carousel-button ui-carousel-prev-button ui-icon ui-icon-circle-triangle-w"></span><div class="ui-carousel-page-links"><a href="#" class="ui-icon ui-carousel-page-link ui-icon-radio-off"></a><a href="#" class="ui-icon ui-carousel-page-link ui-icon-radio-off"></a><a href="#" class="ui-icon ui-carousel-page-link ui-icon-radio-off"></a></div><select name="j_idt124_mobiledropdown" class="ui-carousel-mobiledropdown ui-widget ui-state-default ui-corner-left"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option></select></div><div class="ui-carousel-viewport"><ul class="ui-carousel-items"><li class="ui-carousel-item ui-widget-content ui-corner-all" style="text-align:center"><div id="j_idt124:0:j_idt125" class="ui-panelgrid ui-widget ui-panelgrid-blank" style="width:100%;margin:10px 0px"><div id="j_idt124:0:j_idt125_content" class="ui-panelgrid-content ui-widget-content ui-grid ui-grid-responsive"><div class="ui-grid-row"><div class="ui-panelgrid-cell label ui-grid-col-6">Id:</div><div class="ui-panelgrid-cell value ui-grid-col-6">1a17e15d</div></div><div class="ui-grid-row"><div class="ui-panelgrid-cell label ui-grid-col-6">Year</div><div class="ui-panelgrid-cell value ui-grid-col-6">1966</div></div><div class="ui-grid-row"><div class="ui-panelgrid-cell label ui-grid-col-6">Color:</div><div class="ui-panelgrid-cell value ui-grid-col-6"><span style="color:Silver">Silver</span></div></div><div class="ui-grid-row"><div class="ui-panelgrid-cell label ui-grid-col-6">Price</div><div class="ui-panelgrid-cell value ui-grid-col-6">$33912</div></div></div></div></li><li class="ui-carousel-item ui-widget-content ui-corner-all" style="text-align:center"><div id="j_idt124:1:j_idt125" class="ui-panelgrid ui-widget ui-panelgrid-blank" style="width:100%;margin:10px 0px"><div id="j_idt124:1:j_idt125_content" class="ui-panelgrid-content ui-widget-content ui-grid ui-grid-responsive"><div class="ui-grid-row"><div class="ui-panelgrid-cell label ui-grid-col-6">Id:</div><div class="ui-panelgrid-cell value ui-grid-col-6">c26af273</div></div><div class="ui-grid-row"><div class="ui-panelgrid-cell label ui-grid-col-6">Year</div><div class="ui-panelgrid-cell value ui-grid-col-6">1980</div></div><div class="ui-grid-row"><div class="ui-panelgrid-cell label ui-grid-col-6">Color:</div><div class="ui-panelgrid-cell value ui-grid-col-6"><span style="color:Orange">Orange</span></div></div><div class="ui-grid-row"><div class="ui-panelgrid-cell label ui-grid-col-6">Price</div><div class="ui-panelgrid-cell value ui-grid-col-6">$63450</div></div></div></div></li><li class="ui-carousel-item ui-widget-content ui-corner-all" style="text-align:center"><div id="j_idt124:2:j_idt125" class="ui-panelgrid ui-widget ui-panelgrid-blank" style="width:100%;margin:10px 0px"><div id="j_idt124:2:j_idt125_content" class="ui-panelgrid-content ui-widget-content ui-grid ui-grid-responsive"><div class="ui-grid-row"><div class="ui-panelgrid-cell label ui-grid-col-6">Id:</div><div class="ui-panelgrid-cell value ui-grid-col-6">d1f2b650</div></div><div class="ui-grid-row"><div class="ui-panelgrid-cell label ui-grid-col-6">Year</div><div class="ui-panelgrid-cell value ui-grid-col-6">2009</div></div><div class="ui-grid-row"><div class="ui-panelgrid-cell label ui-grid-col-6">Color:</div><div class="ui-panelgrid-cell value ui-grid-col-6"><span style="color:Yellow">Yellow</span></div></div><div class="ui-grid-row"><div class="ui-panelgrid-cell label ui-grid-col-6">Price</div><div class="ui-panelgrid-cell value ui-grid-col-6">$12682</div></div></div></div></li><li class="ui-carousel-item ui-widget-content ui-corner-all" style="text-align:center"><div id="j_idt124:3:j_idt125" class="ui-panelgrid ui-widget ui-panelgrid-blank" style="width:100%;margin:10px 0px"><div id="j_idt124:3:j_idt125_content" class="ui-panelgrid-content ui-widget-content ui-grid ui-grid-responsive"><div class="ui-grid-row"><div class="ui-panelgrid-cell label ui-grid-col-6">Id:</div><div class="ui-panelgrid-cell value ui-grid-col-6">5eb45017</div></div><div class="ui-grid-row"><div class="ui-panelgrid-cell label ui-grid-col-6">Year</div><div class="ui-panelgrid-cell value ui-grid-col-6">1984</div></div><div class="ui-grid-row"><div class="ui-panelgrid-cell label ui-grid-col-6">Color:</div><div class="ui-panelgrid-cell value ui-grid-col-6"><span style="color:Red">Red</span></div></div><div class="ui-grid-row"><div class="ui-panelgrid-cell label ui-grid-col-6">Price</div><div class="ui-panelgrid-cell value ui-grid-col-6">$29021</div></div></div></div></li><li class="ui-carousel-item ui-widget-content ui-corner-all" style="text-align:center"><div id="j_idt124:4:j_idt125" class="ui-panelgrid ui-widget ui-panelgrid-blank" style="width:100%;margin:10px 0px"><div id="j_idt124:4:j_idt125_content" class="ui-panelgrid-content ui-widget-content ui-grid ui-grid-responsive"><div class="ui-grid-row"><div class="ui-panelgrid-cell label ui-grid-col-6">Id:</div><div class="ui-panelgrid-cell value ui-grid-col-6">5fb3c519</div></div><div class="ui-grid-row"><div class="ui-panelgrid-cell label ui-grid-col-6">Year</div><div class="ui-panelgrid-cell value ui-grid-col-6">1983</div></div><div class="ui-grid-row"><div class="ui-panelgrid-cell label ui-grid-col-6">Color:</div><div class="ui-panelgrid-cell value ui-grid-col-6"><span style="color:Maroon">Maroon</span></div></div><div class="ui-grid-row"><div class="ui-panelgrid-cell label ui-grid-col-6">Price</div><div class="ui-panelgrid-cell value ui-grid-col-6">$66070</div></div></div></div></li><li class="ui-carousel-item ui-widget-content ui-corner-all" style="text-align:center"><div id="j_idt124:5:j_idt125" class="ui-panelgrid ui-widget ui-panelgrid-blank" style="width:100%;margin:10px 0px"><div id="j_idt124:5:j_idt125_content" class="ui-panelgrid-content ui-widget-content ui-grid ui-grid-responsive"><div class="ui-grid-row"><div class="ui-panelgrid-cell label ui-grid-col-6">Id:</div><div class="ui-panelgrid-cell value ui-grid-col-6">a6b4dd97</div></div><div class="ui-grid-row"><div class="ui-panelgrid-cell label ui-grid-col-6">Year</div><div class="ui-panelgrid-cell value ui-grid-col-6">1977</div></div><div class="ui-grid-row"><div class="ui-panelgrid-cell label ui-grid-col-6">Color:</div><div class="ui-panelgrid-cell value ui-grid-col-6"><span style="color:Black">Black</span></div></div><div class="ui-grid-row"><div class="ui-panelgrid-cell label ui-grid-col-6">Price</div><div class="ui-panelgrid-cell value ui-grid-col-6">$60270</div></div></div></div></li><li class="ui-carousel-item ui-widget-content ui-corner-all" style="text-align:center"><div id="j_idt124:6:j_idt125" class="ui-panelgrid ui-widget ui-panelgrid-blank" style="width:100%;margin:10px 0px"><div id="j_idt124:6:j_idt125_content" class="ui-panelgrid-content ui-widget-content ui-grid ui-grid-responsive"><div class="ui-grid-row"><div class="ui-panelgrid-cell label ui-grid-col-6">Id:</div><div class="ui-panelgrid-cell value ui-grid-col-6">0c75a2c0</div></div><div class="ui-grid-row"><div class="ui-panelgrid-cell label ui-grid-col-6">Year</div><div class="ui-panelgrid-cell value ui-grid-col-6">2008</div></div><div class="ui-grid-row"><div class="ui-panelgrid-cell label ui-grid-col-6">Color:</div><div class="ui-panelgrid-cell value ui-grid-col-6"><span style="color:Blue">Blue</span></div></div><div class="ui-grid-row"><div class="ui-panelgrid-cell label ui-grid-col-6">Price</div><div class="ui-panelgrid-cell value ui-grid-col-6">$99157</div></div></div></div></li><li class="ui-carousel-item ui-widget-content ui-corner-all" style="text-align:center"><div id="j_idt124:7:j_idt125" class="ui-panelgrid ui-widget ui-panelgrid-blank" style="width:100%;margin:10px 0px"><div id="j_idt124:7:j_idt125_content" class="ui-panelgrid-content ui-widget-content ui-grid ui-grid-responsive"><div class="ui-grid-row"><div class="ui-panelgrid-cell label ui-grid-col-6">Id:</div><div class="ui-panelgrid-cell value ui-grid-col-6">9eb2cf58</div></div><div class="ui-grid-row"><div class="ui-panelgrid-cell label ui-grid-col-6">Year</div><div class="ui-panelgrid-cell value ui-grid-col-6">1968</div></div><div class="ui-grid-row"><div class="ui-panelgrid-cell label ui-grid-col-6">Color:</div><div class="ui-panelgrid-cell value ui-grid-col-6"><span style="color:Yellow">Yellow</span></div></div><div class="ui-grid-row"><div class="ui-panelgrid-cell label ui-grid-col-6">Price</div><div class="ui-panelgrid-cell value ui-grid-col-6">$23410</div></div></div></div></li><li class="ui-carousel-item ui-widget-content ui-corner-all" style="text-align:center"><div id="j_idt124:8:j_idt125" class="ui-panelgrid ui-widget ui-panelgrid-blank" style="width:100%;margin:10px 0px"><div id="j_idt124:8:j_idt125_content" class="ui-panelgrid-content ui-widget-content ui-grid ui-grid-responsive"><div class="ui-grid-row"><div class="ui-panelgrid-cell label ui-grid-col-6">Id:</div><div class="ui-panelgrid-cell value ui-grid-col-6">7e75167e</div></div><div class="ui-grid-row"><div class="ui-panelgrid-cell label ui-grid-col-6">Year</div><div class="ui-panelgrid-cell value ui-grid-col-6">1972</div></div><div class="ui-grid-row"><div class="ui-panelgrid-cell label ui-grid-col-6">Color:</div><div class="ui-panelgrid-cell value ui-grid-col-6"><span style="color:Maroon">Maroon</span></div></div><div class="ui-grid-row"><div class="ui-panelgrid-cell label ui-grid-col-6">Price</div><div class="ui-panelgrid-cell value ui-grid-col-6">$56460</div></div></div></div></li></ul></div><input id="j_idt124_page" name="j_idt124_page" type="hidden" autocomplete="off" value="0" /></div><script id="j_idt124_s" type="text/javascript">$(function(){PrimeFaces.cw("Carousel","widget_j_idt124",{id:"j_idt124",responsive:true,breakpoint:640});});</script></div></div><script id="j_idt122_s" type="text/javascript">PrimeFaces.cw("Panel","widget_j_idt122",{id:"j_idt122"});</script>
            </div>
        </div>

        <div class="Container100 ui-fluid">
            <div class="ContainerIndent"><div id="j_idt135" class="ui-panel ui-widget ui-widget-content ui-corner-all" data-widget="widget_j_idt135"><div id="j_idt135_content" class="ui-panel-content ui-widget-content">
                    <div class="FontBold Fs18 hardblue" style="margin: 15px 10px">Responsive OrderList</div>
                    <div class="Separator"></div><div id="j_idt137" class="ui-orderlist ui-grid ui-widget ui-grid-responsive" style="max-width:500px;"><div class="ui-grid-row"><div class="ui-orderlist-controls ui-grid-col-2"><button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-orderlist-button-move-up" title="Move Up"><span class="ui-button-icon-left ui-icon ui-c ui-icon ui-icon-arrow-1-n"></span><span class="ui-button-text ui-c">ui-button</span></button><button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-orderlist-button-move-top" title="Move Top"><span class="ui-button-icon-left ui-icon ui-c ui-icon ui-icon-arrowstop-1-n"></span><span class="ui-button-text ui-c">ui-button</span></button><button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-orderlist-button-move-down" title="Move Down"><span class="ui-button-icon-left ui-icon ui-c ui-icon ui-icon-arrow-1-s"></span><span class="ui-button-text ui-c">ui-button</span></button><button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-orderlist-button-move-bottom" title="Move Bottom"><span class="ui-button-icon-left ui-icon ui-c ui-icon ui-icon-arrowstop-1-s"></span><span class="ui-button-text ui-c">ui-button</span></button></div><div class="ui-grid-col-10"><div class="ui-orderlist-caption ui-widget-header ui-corner-top">Cities List</div><ul class="ui-widget-content ui-orderlist-list ui-corner-bottom"><li class="ui-orderlist-item ui-corner-all" data-item-value="San Francisco">San Francisco</li><li class="ui-orderlist-item ui-corner-all" data-item-value="London">London</li><li class="ui-orderlist-item ui-corner-all" data-item-value="Paris">Paris</li><li class="ui-orderlist-item ui-corner-all" data-item-value="Istanbul">Istanbul</li><li class="ui-orderlist-item ui-corner-all" data-item-value="Berlin">Berlin</li><li class="ui-orderlist-item ui-corner-all" data-item-value="Barcelona">Barcelona</li><li class="ui-orderlist-item ui-corner-all" data-item-value="Rome">Rome</li></ul><select id="j_idt137_values" name="j_idt137_values" multiple="true" class="ui-helper-hidden"></select></div></div></div><script id="j_idt137_s" type="text/javascript">PrimeFaces.cw("OrderList","widget_j_idt137",{id:"j_idt137"});</script></div></div><script id="j_idt135_s" type="text/javascript">PrimeFaces.cw("Panel","widget_j_idt135",{id:"j_idt135"});</script>
            </div>
        </div>

        <div class="Container100 ui-fluid">
            <div class="ContainerIndent"><div id="j_idt140" class="ui-panel ui-widget ui-widget-content ui-corner-all" data-widget="widget_j_idt140"><div id="j_idt140_content" class="ui-panel-content ui-widget-content">
                    <div class="FontBold Fs18 hardblue" style="margin: 15px 10px">Responsive Accordion Panel</div>
                    <div class="Separator"></div><div id="j_idt142" class="ui-accordion ui-widget ui-helper-reset ui-hidden-container" style="margin-top:20px" role="tablist" data-widget="widget_j_idt142"><h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-state-active ui-corner-top" role="tab" aria-expanded="true" aria-selected="true"><span class="ui-icon ui-icon-triangle-1-s"></span>Godfather Part I</h3><div id="j_idt142:j_idt143" class="ui-accordion-content ui-helper-reset ui-widget-content" role="tabpanel" aria-hidden="false"><div id="j_idt142:j_idt144" class="ui-panelgrid ui-widget ui-panelgrid-blank"><div id="j_idt142:j_idt144_content" class="ui-panelgrid-content ui-widget-content ui-grid ui-grid-responsive"><div class="ui-grid-row"><div class="ui-panelgrid-cell ui-grid-col-4">IMAGE</div><div class="ui-panelgrid-cell ui-grid-col-8">The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.                                      His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.                                     Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family, kind and benevolent to those who give respect,                                      but given to ruthless violence whenever anything stands against the good of the family.</div></div></div></div></div><h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false"><span class="ui-icon ui-icon-triangle-1-e"></span>Godfather Part II</h3><div id="j_idt142:j_idt147" class="ui-accordion-content ui-helper-reset ui-widget-content ui-helper-hidden" role="tabpanel" aria-hidden="true"><div id="j_idt142:j_idt148" class="ui-panelgrid ui-widget ui-panelgrid-blank"><div id="j_idt142:j_idt148_content" class="ui-panelgrid-content ui-widget-content ui-grid ui-grid-responsive"><div class="ui-grid-row"><div class="ui-panelgrid-cell ui-grid-col-2">IMAGE</div><div class="ui-panelgrid-cell ui-grid-col-10">Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, The_Godfather, parallels the young Vito Corleone's rise with his son Michael's spiritual fall, deepening The_Godfather's depiction of the dark side of the American dream.                                                In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy,                                                killing the local Black Hand Fanucci after he demands his customary cut of the tyro's business. With Fanucci gone, Vito's communal stature grows.</div></div></div></div></div><h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false"><span class="ui-icon ui-icon-triangle-1-e"></span>Godfather Part III</h3><div id="j_idt142:j_idt151" class="ui-accordion-content ui-helper-reset ui-widget-content ui-helper-hidden" role="tabpanel" aria-hidden="true"><div id="j_idt142:j_idt152" class="ui-panelgrid ui-widget ui-panelgrid-blank"><div id="j_idt142:j_idt152_content" class="ui-panelgrid-content ui-widget-content ui-grid ui-grid-responsive"><div class="ui-grid-row"><div class="ui-panelgrid-cell ui-grid-col-2">IMAGE</div><div class="ui-panelgrid-cell ui-grid-col-10">After a break of more than 15 years, director Francis Ford Coppola and writer Mario Puzo returned to the well for this third and final story of the fictional Corleone crime family.                                                Two decades have passed, and crime kingpin Michael Corleone, now divorced from his wife Kay has nearly succeeded in keeping his promise that his family would one day be completely legitimate.</div></div></div></div></div><input type="hidden" id="j_idt142_active" name="j_idt142_active" value="0" autocomplete="off" /></div><script id="j_idt142_s" type="text/javascript">PrimeFaces.cw("AccordionPanel","widget_j_idt142",{id:"j_idt142"});</script></div></div><script id="j_idt140_s" type="text/javascript">PrimeFaces.cw("Panel","widget_j_idt140",{id:"j_idt140"});</script>
            </div>
        </div>

        <div class="Container100 ui-fluid">
            <div class="ContainerIndent"><div id="j_idt156" class="ui-panel ui-widget ui-widget-content ui-corner-all" data-widget="widget_j_idt156"><div id="j_idt156_content" class="ui-panel-content ui-widget-content">
                    <div class="FontBold Fs18 hardblue" style="margin: 15px 10px">Responsive Menu - PanelMenu</div>
                    <div class="Separator"></div>
<form id="j_idt158" name="j_idt158" method="post" action="/sentinel/sample.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_idt158" value="j_idt158" />
<div id="j_idt158:j_idt159" class="ui-panelgrid ui-widget" style="border:0px none; background-color:transparent;"><div id="j_idt158:j_idt159_content" class="ui-panelgrid-content ui-widget-content ui-grid ui-grid-responsive"><div class="ui-grid-row"><div class="ui-panelgrid-cell ui-grid-col-6"><div id="j_idt158:j_idt160" class="ui-menu ui-widget ui-widget-content ui-corner-all ui-helper-clearfix ui-menu-toggleable" role="menu"><div tabindex="0" class="ui-helper-hidden-accessible"></div><ul class="ui-menu-list ui-helper-reset"><li id="j_idt158:j_idt161" class="ui-widget-header ui-corner-all"><h3><span class="ui-icon ui-icon-triangle-1-s"></span>Ajax</h3></li><li class="ui-menuitem ui-widget ui-corner-all" role="menuitem"><a tabindex="-1" class="ui-menuitem-link ui-corner-all" href="#" onclick="PrimeFaces.ab({s:&quot;j_idt158:j_idt162&quot;,f:&quot;j_idt158&quot;});return false;"><span class="ui-menuitem-icon ui-icon ui-icon-disk fa fa-save Fs15"></span><span class="ui-menuitem-text">Save</span></a></li><li class="ui-menuitem ui-widget ui-corner-all" role="menuitem"><a tabindex="-1" class="ui-menuitem-link ui-corner-all" href="#" onclick="PrimeFaces.ab({s:&quot;j_idt158:j_idt163&quot;,f:&quot;j_idt158&quot;});return false;"><span class="ui-menuitem-icon ui-icon ui-icon-arrowrefresh-1-w fa fa-repeat Fs15"></span><span class="ui-menuitem-text">Update</span></a></li><li id="j_idt158:j_idt164" class="ui-widget-header ui-corner-all"><h3><span class="ui-icon ui-icon-triangle-1-s"></span>Non-Ajax</h3></li><li class="ui-menuitem ui-widget ui-corner-all" role="menuitem"><a tabindex="-1" class="ui-menuitem-link ui-corner-all" href="#" onclick="PrimeFaces.ab({s:&quot;j_idt158:j_idt165&quot;,f:&quot;j_idt158&quot;});return false;"><span class="ui-menuitem-icon ui-icon ui-icon-close fa fa-close Fs15"></span><span class="ui-menuitem-text">Delete</span></a></li><li id="j_idt158:j_idt166" class="ui-widget-header ui-corner-all"><h3><span class="ui-icon ui-icon-triangle-1-s"></span>Navigations</h3></li><li class="ui-menuitem ui-widget ui-corner-all" role="menuitem"><a tabindex="-1" class="ui-menuitem-link ui-corner-all" href="http://www.primefaces.org/"><span class="ui-menuitem-icon ui-icon ui-icon-home fa fa-home Fs15"></span><span class="ui-menuitem-text">External</span></a></li><li class="ui-menuitem ui-widget ui-corner-all" role="menuitem"><a tabindex="-1" class="ui-menuitem-link ui-corner-all" href="#" onclick="PrimeFaces.ab({s:&quot;j_idt158:j_idt168&quot;,f:&quot;j_idt158&quot;});return false;"><span class="ui-menuitem-icon ui-icon ui-icon-star fa fa-star Fs15"></span><span class="ui-menuitem-text">Internal</span></a></li></ul></div><script id="j_idt158:j_idt160_s" type="text/javascript">$(function(){PrimeFaces.cw("PlainMenu","widget_j_idt158_j_idt160",{id:"j_idt158:j_idt160",toggleable:true});});</script></div><div class="ui-panelgrid-cell ui-grid-col-6"><div id="j_idt158:j_idt169" class="ui-panelmenu ui-widget" role="menu"><div class="ui-panelmenu-panel"><h3 class="ui-widget ui-panelmenu-header ui-state-default ui-corner-all" role="tab"><span class="ui-icon ui-icon-triangle-1-e"></span><a href="#" tabindex="-1">Ajax Menuitems</a></h3><div class="ui-panelmenu-content ui-widget-content ui-helper-hidden" role="tabpanel" id="j_idt158:j_idt169_j_idt170"><ul class="ui-menu-list ui-helper-reset"><li class="ui-menuitem ui-widget ui-corner-all" role="menuitem"><a tabindex="-1" class="ui-menuitem-link ui-corner-all" href="#" onclick="PrimeFaces.ab({s:&quot;j_idt158:j_idt171&quot;,f:&quot;j_idt158&quot;});return false;"><span class="ui-menuitem-icon ui-icon fa fa-save Fs15"></span><span class="ui-menuitem-text">Save</span></a></li><li class="ui-menuitem ui-widget ui-corner-all" role="menuitem"><a tabindex="-1" class="ui-menuitem-link ui-corner-all" href="#" onclick="PrimeFaces.ab({s:&quot;j_idt158:j_idt172&quot;,f:&quot;j_idt158&quot;});return false;"><span class="ui-menuitem-icon ui-icon fa fa-refresh Fs15"></span><span class="ui-menuitem-text">Update</span></a></li></ul></div></div><div class="ui-panelmenu-panel"><h3 class="ui-widget ui-panelmenu-header ui-state-default ui-corner-all" role="tab"><span class="ui-icon ui-icon-triangle-1-e"></span><a href="#" tabindex="-1">Non-Ajax Menuitem</a></h3><div class="ui-panelmenu-content ui-widget-content ui-helper-hidden" role="tabpanel" id="j_idt158:j_idt169_j_idt173"><ul class="ui-menu-list ui-helper-reset"><li class="ui-menuitem ui-widget ui-corner-all" role="menuitem"><a tabindex="-1" class="ui-menuitem-link ui-corner-all" href="#" onclick="PrimeFaces.ab({s:&quot;j_idt158:j_idt174&quot;,f:&quot;j_idt158&quot;});return false;"><span class="ui-menuitem-icon ui-icon fa fa-close Fs15"></span><span class="ui-menuitem-text">Delete</span></a></li></ul></div></div><div class="ui-panelmenu-panel"><h3 class="ui-widget ui-panelmenu-header ui-state-default ui-corner-all" role="tab"><span class="ui-icon ui-icon-triangle-1-e"></span><a href="#" tabindex="-1">Navigations</a></h3><div class="ui-panelmenu-content ui-widget-content ui-helper-hidden" role="tabpanel" id="j_idt158:j_idt169_j_idt176"><ul class="ui-menu-list ui-helper-reset"><li id="j_idt158:j_idt177" class="ui-widget ui-menuitem ui-corner-all ui-menu-parent" role="menuitem"><a class="ui-menuitem-link ui-corner-all"><span class="ui-panelmenu-icon ui-icon ui-icon-triangle-1-e"></span><span class="ui-menuitem-text">Links</span></a><ul class="ui-menu-list ui-helper-reset ui-helper-hidden"><li id="j_idt158:j_idt178" class="ui-widget ui-menuitem ui-corner-all ui-menu-parent" role="menuitem"><a class="ui-menuitem-link ui-corner-all"><span class="ui-panelmenu-icon ui-icon ui-icon-triangle-1-e"></span><span class="ui-menuitem-text">PrimeFaces</span></a><ul class="ui-menu-list ui-helper-reset ui-helper-hidden"><li class="ui-menuitem ui-widget ui-corner-all" role="menuitem"><a tabindex="-1" class="ui-menuitem-link ui-corner-all" href="http://www.primefaces.org/"><span class="ui-menuitem-icon ui-icon fa fa-home Fs15"></span><span class="ui-menuitem-text">Home</span></a></li><li class="ui-menuitem ui-widget ui-corner-all" role="menuitem"><a tabindex="-1" class="ui-menuitem-link ui-corner-all" href="http://www.primefaces.org/documentation"><span class="ui-menuitem-icon ui-icon fa fa-file Fs15"></span><span class="ui-menuitem-text">Docs</span></a></li><li class="ui-menuitem ui-widget ui-corner-all" role="menuitem"><a tabindex="-1" class="ui-menuitem-link ui-corner-all" href="http://www.primefaces.org/downloads"><span class="ui-menuitem-icon ui-icon fa fa-download Fs15"></span><span class="ui-menuitem-text">Download</span></a></li><li class="ui-menuitem ui-widget ui-corner-all" role="menuitem"><a tabindex="-1" class="ui-menuitem-link ui-corner-all" href="http://www.primefaces.org/support"><span class="ui-menuitem-icon ui-icon fa fa-ticket Fs15"></span><span class="ui-menuitem-text">Support</span></a></li></ul></li></ul></li><li class="ui-menuitem ui-widget ui-corner-all" role="menuitem"><a tabindex="-1" class="ui-menuitem-link ui-corner-all" href="#" onclick="PrimeFaces.ab({s:&quot;j_idt158:j_idt183&quot;,f:&quot;j_idt158&quot;});return false;"><span class="ui-menuitem-icon ui-icon fa fa-mobile Fs15"></span><span class="ui-menuitem-text">Mobile</span></a></li></ul></div></div></div><script id="j_idt158:j_idt169_s" type="text/javascript">PrimeFaces.cw("PanelMenu","widget_j_idt158_j_idt169",{id:"j_idt158:j_idt169",stateful:true});</script></div></div></div></div><input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:84" value="-2174277148937827428:-4859957156042311965" autocomplete="off" />
</form></div></div><script id="j_idt156_s" type="text/javascript">PrimeFaces.cw("Panel","widget_j_idt156",{id:"j_idt156"});</script>
            </div>
        </div>

        <div class="Container100 ui-fluid">
            <div class="ContainerIndent"><div id="j_idt185" class="ui-panel ui-widget ui-widget-content ui-corner-all" data-widget="widget_j_idt185"><div id="j_idt185_content" class="ui-panel-content ui-widget-content">
                    <div class="FontBold Fs18 hardblue" style="margin: 15px 10px">Responsive Panel</div>
                    <div class="Separator"></div><div id="j_idt187" class="ui-panel ui-widget ui-widget-content ui-corner-all" style="margin-top:20px" data-widget="widget_j_idt187"><div id="j_idt187_header" class="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all"><span class="ui-panel-title">Panel</span></div><div id="j_idt187_content" class="ui-panel-content ui-widget-content"><div id="j_idt188" class="ui-panelgrid ui-widget ui-panelgrid-blank"><div id="j_idt188_content" class="ui-panelgrid-content ui-widget-content ui-grid ui-grid-responsive"><div class="ui-grid-row"><div class="ui-panelgrid-cell ui-grid-col-4">IMAGE</div><div class="ui-panelgrid-cell ui-grid-col-8">The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.                                  His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.                                 Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family, kind and benevolent to those who give respect,                                  but given to ruthless violence whenever anything stands against the good of the family.</div></div></div></div></div><div id="j_idt187_footer" class="ui-panel-footer ui-widget-content">Movie Details</div></div><script id="j_idt187_s" type="text/javascript">PrimeFaces.cw("Panel","widget_j_idt187",{id:"j_idt187"});</script></div></div><script id="j_idt185_s" type="text/javascript">PrimeFaces.cw("Panel","widget_j_idt185",{id:"j_idt185"});</script>
            </div>
        </div>

    </ui:define>
</ui:composition>
